<template>
  <div class="conversion-table">
    <el-table
      :data="colorData"
      empty-text="暂无数据!"
      style="width: 100%"
      table-layout="fixed"
      stripe
    >
      <el-table-column align="center" prop="color" label="颜色" min-width="80">
        <template #default="scope">
          <!-- <el-tag effect="light">{{ scope.row.productName }}{{ scope.row.color }}</el-tag> -->
          {{ scope.row.color }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="postscript" label="备注信息" />
      <el-table-column align="center" prop="updatedAt" label="最新修改日期" min-width="100">
        <template #default="scope">
          <div>
            {{ moment(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="updatedUser" label="最新修改人" min-width="80" />
      <el-table-column align="center" prop="createdAt" label="添加日期" min-width="100">
        <template #default="scope">
          <div>
            {{ moment(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createdUser" label="添加人" min-width="80" />
      <el-table-column align="center" label="操作">
        <template #default="scope" min-width="180">
          <el-button type="primary" plain size="small" @click="updateHandle(scope.row)">修改</el-button>
          <el-button type="danger" plain size="small" @click="deleteHandle(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="20" justify="center" align="center" type="flex" class="page-row">
      <el-col :span="10">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-size="size"
          :total="total"
          background
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { colorSoftDelete } from '@/api/color'
import { Message } from 'element-ui'
export default {
  props: {
    colorData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      color: '',
      screenData: {},
      total: 0,
      page: 1,
      size: 10
    }
  },
  watch: {
    colorData(newVal, oldVal) {
      this.colorData = newVal
    }
  },
  methods: {
    updateHandle(row) {
      row.color = '青色'
    },
    async deleteHandle(row) {
      try {
        const { code, message } = await colorSoftDelete({ id: row.id })
        if (code === 200) {
          Message({ type: 'success', message })
          this.$emit('refreshTable', { page: this.page, size: this.size })
        }
      } catch (error) {
        Message({ type: 'error', message: '删除失败!' })
      }
    }
  }
}

</script>

<style lang="scss" scoped>
.conversion-table{
// max-height: 528px;
// overflow: hidden;
padding-bottom: 20px;
  .odd-row {
    td{
      background-color: #f00;
    }
  }
  .even-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
}

v-deep .el-table__body{
td{
    background-color: #fefefe;
}
}

v-deep .el-table--striped{
.el-table__body{
  tr.el-table__row--striped{
    td{
      background-color: #efefef;
    }
  }
}
}
v-deep .el-table--enable-row-hover{
  .el-table__body{
    tr:hover{
      >td{
        background-color: #66b1ff;
        color: #fff;
      }
    }
  }
}

v-deep .el-table th.is-leaf{
  background-color: #545c64;
  color: #fff;
}
.weight-input,
.number-input{
  v-deep .el-input__inner{
    text-align: center;
    width: 100px;
  }
}

.page-row{
  display: flex;
  margin-top: 20px;
  box-sizing: border-box;
}
</style>
